﻿<template>
    <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-click="handleClick"
        style="height: 40px;"
    >
        <el-tab-pane label="全部采购订单" name="order"></el-tab-pane>
        <el-tab-pane name="refundOrder">
            <template #label>
                <span class="custom-tabs-label">
                    重新分配供应商
                    <span class="notification-badge">{{ refundOrderQty }}</span>
                </span>
            </template>
        </el-tab-pane>
    </el-tabs>
     <Suspense>
        <template #default>
			<keep-alive>
				<component :is="activeComponent"/>
            </keep-alive>
        </template>
        <template #fallback>
            <el-skeleton :rows="3" />
        </template>
    </Suspense>
</template>
  
<script>
import { defineAsyncComponent } from "vue";
export default {
    name: "purchaseOrder",
    components: {
        order: defineAsyncComponent(() => import("./order")),
        refundOrder: defineAsyncComponent(() => import("./refund")),
    },
    data() {
        return {
            activeName: "order", // 初始显示的标签页名称应该对应el-tab-pane的name属性
            activeComponent: "order", // 初始显示的组件名称
            refundOrderQty: 0,
            timer: null, // 用于存储定时器ID
        };
    },
    methods: {
        handleClick(tab, event) {
            this.$nextTick(() => {
				// 处理标签页点击事件
				console.log(tab.props.name); // 输出当前标签页的名称
				this.activeComponent = tab.props.name;
			});
        },
        async getOrderQty() {
            try {
                var returnValue = await this.$API.auth.GetProcessApi.get(
                    "refund-purchase-order/order-qty",
                    {}
                );
                if (returnValue.status == 200) {
                    this.refundOrderQty = returnValue.response;
                } else {
                    //this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                return false;
            }
        },
    },
    async mounted() {
        this.getOrderQty();
        this.timer = setInterval(() => {
            this.getOrderQty();
        }, 5000);
        console.log('timer0',this.timer)
    },
    deactivated() {
        console.log('timer1',this.timer)
        // 在组件销毁前清除定时器
        if (this.timer) {
            clearInterval(this.timer);
        }
    },
};
</script> 
<style scoped>
.custom-tabs-label {
    display: flex;
    align-items: center;
}

.notification-icon {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: 0px;
    right: -10px;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
</style>